<script setup>
import { ref } from 'vue'
import { getCodeApi, loginApi } from '../../api'
import { ElMessage } from 'element-plus'
import useUserStore from '../../store/userStore'
import { useRouter } from 'vue-router'
import { Cellphone, Lock } from '@element-plus/icons-vue'
import { useCountDown } from '../../hooks'

// 表单数据
const form = ref({
  phone: '13855557777',
  code: '',
  status: false,
})
// 表单验证规则
const formRules = ref({
  phone: [
    {
      required: true,
      message: '手机号不能为空',
      trigger: 'blur',
    },
    {
      pattern: /^1[3-9]\d{9}$/,
      message: '手机号格式不正确',
      trigger: 'blur',
    },
  ],
  code: [
    {
      required: true,
      message: '验证码不能为空',
      trigger: 'blur',
    },
    {
      pattern: /^\d{6}$/,
      message: '验证码格式不正确',
      trigger: 'blur',
    },
  ],
})

const formRef = ref(null)
// 用户Store
const userStore = useUserStore()
// 路由
const router = useRouter()

const { count, isDown, start } = useCountDown(5)

// 发送验证码
const sendCode = () => {
  // 验证手机号
  formRef.value.validateField('phone', async (valid) => {
    if (!valid) {
      return
    }
    start()
    // 发送验证码
    const res = await getCodeApi(form.value.phone)
    form.value.code = res.data.code
  })
}
// 登录
const onSubmit = () => {
  // 验证是否同意协议
  if (!form.value.status) {
    ElMessage.error('请先阅读并同意用户协议和隐私条款')
    return
  }

  // 验证表单
  formRef.value.validate(async (valid) => {
    if (!valid) {
      ElMessage.error('请填写正确的手机号和验证码')
      return
    }
    // 登录
    const res = await loginApi({
      phone: form.value.phone,
      code: form.value.code,
    })
    // 存储 Token
    userStore.updateToken(res.data.token)
    // 跳转首页
    router.push('/')
    ElMessage.success('登录成功')
  })
}
</script>

<template>
  <div class="page">
    <!-- 登录框 -->
    <div class="login-box">
      <h1 class="login-title">极客园</h1>
      <!-- 表单 -->
      <el-form
        :model="form"
        :rules="formRules"
        ref="formRef"
      >
        <!-- 手机号 -->
        <el-form-item prop="phone">
          <el-input
            v-model="form.phone"
            :prefix-icon="Cellphone"
            placeholder="请输入手机号"
          />
        </el-form-item>
        <!-- 验证码 -->
        <el-form-item prop="code">
          <el-input
            v-model="form.code"
            style="width: 68%"
            :prefix-icon="Lock"
            show-password
            placeholder="请输入验证码"
          />
          <el-button
            type="primary"
            @click="sendCode"
            :disabled="isDown"
            style="width: 30%; margin-left: 2%"
          >
            <!-- 获取验证码 -->
            <template v-if="!isDown">获取验证码</template>
            <template v-else>{{ count }}s 重新获取</template>
          </el-button>
        </el-form-item>
        <!-- 许可协议 -->
        <el-form-item>
          <el-checkbox
            label="我已阅读并同意用户协议和隐私条款"
            v-model="form.status"
          />
        </el-form-item>
        <!-- 登录按钮 -->
        <el-form-item>
          <el-button
            type="primary"
            @click="onSubmit"
            style="width: 100%"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<style scoped>
.page {
  height: 100vh;
  background: linear-gradient(45deg, red, blue);

  .login-box {
    box-sizing: border-box;
    width: 400px;
    height: 300px;
    background-color: #fff;
    border-radius: 5px;
    padding: 15px;

    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    .login-title {
      text-align: center;
      font-style: italic;
      color: orangered;
    }
  }
}
</style>
